﻿<template>
  <div>
    <!-- 标题栏 -->
    <NavBar
      :title="$route.meta.title"
      :rightBtn="rightBtn"
      @handleIcon="hanldleRight"
    >
    </NavBar>

    <van-search
      v-model="queryParam.logContent"
      placeholder="内容"
      @search="getDataList"
    >
    </van-search>
    <van-pull-refresh v-model="loading" @refresh="getDataList">
      <van-list v-model="loading" :finished="!loading">
        <van-cell v-for="item in data" :key="item.Id">
          <template #default>
            <span>
              <template
                v-for="(item, index) in (item.LogContent || '')
                  .replace(/\r\n/g, '\n')
                  .split('\n')"
              >
                {{ item }}
                <br :key="index" />
              </template>
            </span>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-pagination
      mode="simple"
      v-model="pagination.current"
      :total-items="pagination.total"
      :show-page-size="pagination.pageSize"
      @change="getDataList"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>

    <van-popup v-model="showfilter" position="bottom" closeable>
      <van-form>
        <VanFieldSelectPicker
          name="logType"
          label="类别"
          v-model="queryParam.logType"
          :columns="LogTypeList"
          :option="option"
        />
        <van-field
          v-model="queryParam.opUserName"
          name="opUserName"
          label="操作人"
        />
        <VanFieldDateTimePicker
          name="startTime"
          label="开始时间"
          v-model="queryParam.startTime"
          type="datetime"
        />
        <VanFieldDateTimePicker
          name="endTime"
          label="截止时间"
          v-model="queryParam.endTime"
          type="datetime"
        />
        <div style="margin: 16px; text-align:center; ">
          <van-button type="info" @click="getDataList">查询</van-button>
          <van-button
            type="info"
            style="margin-left:16px;"
            @click="() => (queryParam = {})"
            >重置</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import {
  Base_UserLog_GetLogList,
  Base_UserLog_GetLogTypeList
} from "@/api/Base_Manage/Base_UserLog";
import NavBar from "@/components/NavBar";
import VanFieldSelectPicker from "@/components/VanField/VanFieldSelectPicker";
import VanFieldDateTimePicker from "@/components/VanField/VanFieldDateTimePicker";

import { mapGetters } from "vuex";

export default {
  components: {
    NavBar,
    VanFieldSelectPicker,
    VanFieldDateTimePicker
  },
  mounted() {
    this.init();
    this.getDataList();
    this.rightBtn.number++;
    this.rightBtn.iconName.unshift("filter-o");
  },
  data() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: "Id", order: "asc" },
      loading: false,
      queryParam: {
        logType: "系统任务执行"
      },
      visible: false,
      LogTypeList: [],
      LoglevelList: [],
      rightBtn: {
        number: 0,
        iconName: []
      },
      option: {
        label: "text",
        value: "text"
      },
      showfilter: false
    };
  },
  computed: {
    ...mapGetters(["hasPerm"])
  },

  methods: {
    getDataList() {
      this.loading = true;
      Base_UserLog_GetLogList({
        PageIndex: this.pagination.current,
        PageRows: this.pagination.pageSize,
        SortField: this.sorter.field || "Id",
        SortType: this.sorter.order,
        Search: this.queryParam,
        ...this.filters
      }).then(resJson => {
        this.loading = false;
        this.data = resJson.Data;
        const pagination = { ...this.pagination };
        pagination.total = resJson.Total;
        this.pagination = pagination;
      });
    },
    hanldleRight(item) {
      this.showfilter = true;
    },
    init() {
      Base_UserLog_GetLogTypeList({}).then(resJson => {
        this.LogTypeList = resJson.Data;
      });
    },
    handleSubmit(value) {
      this.showfilter = false;
      this.getDataList();
    }
  }
};
</script>

<style lang="less">
.van-dropdown-menu {
  .van-dropdown-menu__bar {
    height: 33px;
    min-width: 80px;
  }
}
</style>
